<div [ngClass]="{'dark-theme': isDarkTheme | async}" class="mat-dialog-inner-container mat-app-background">
    <div class="file-explorer-header">
      <div>
        <h2 mat-dialog-title>Choose Save Location</h2>
        <mat-card-subtitle>Note: Any un-used folders you create will not be saved.</mat-card-subtitle>
      </div>

      <div class="spacer"></div>

      <mat-card class="mat-elevation-z4 searchDirectoriesContainer ">
        <mat-icon>search</mat-icon>
        <input id="directorySearchInput" type="text" (keyup)="onSearchValueChange($event)" placeholder="Search...">
      </mat-card>
    </div>

    <mat-divider></mat-divider>
    <br/>

    <div class="file-explorer-actions">
      <div class="left-actions">
        <button color="primary" mat-button (click)="navigateUp()">
          <mat-icon mat-list-icon>arrow_back</mat-icon>
          Back
        </button>
        <h4 id="saveLocation">Location: {{getFilePath() === "" ? "N/A" : getFilePath()}}</h4>
      </div>

      <div class="spacer"></div>

      <button color="accent" mat-flat-button (click)="handleCreateFolderAction()">
        <mat-icon mat-list-icon>add</mat-icon>
        New Folder
      </button>
    </div>

    <mat-dialog-content class="mat-typography">

        <div class="file-systme-explorer-container">
            <div class="leftNavigation" mode="side" opened>
                <mat-nav-list role="list">
                    <mat-list-item *ngFor="let dir of leftChildren" (click)="navigateToDir(dir, 'parent')">

                        <mat-icon *ngIf="!isDirectorySelected(dir)" color="accent" mat-list-icon>folder</mat-icon>
                        <mat-icon *ngIf="isDirectorySelected(dir)" color="accent" mat-list-icon>folder_open</mat-icon>
                        <div mat-line>{{dir.value}}</div>
                        <div mat-line>{{getNumChildrenString(dir)}}</div>

                    </mat-list-item>
                </mat-nav-list>
            </div>

            <mat-divider [vertical]="true"></mat-divider>

            <div class="directoryContents">
                <p *ngIf="rightPanelHasContent() && !isCreatingNewFolder">Create a folder with the "New Folder" button.</p>

                <mat-list-item disableRipple *ngIf="isCreatingNewFolder">
                  <mat-form-field id="create_new_folder_entry" class="create-new-folder-input">
                    <span matPrefix>
                      <mat-icon color="accent">create_new_folder</mat-icon>
                      &nbsp;
                    </span>
                    <input matInput (keyup)="handleFolderNameChange($event)" type="text" placeholder="Folder Name..." />
                  </mat-form-field>

                  <button matSuffix (click)="cancelFolderCreation()" color="default" mat-icon-button>
                    <mat-icon>clear</mat-icon>
                  </button>

                  <button type="submit" color="primary" (click)="createFolder()" mat-icon-button>
                    <mat-icon>done</mat-icon>
                  </button>
                </mat-list-item>

                <mat-nav-list role="list">
                    <mat-list-item *ngFor="let dir of rightChildren" id={{dir.value}} (click)="navigateToDir(dir, 'child')">
                        <mat-icon color="accent" mat-list-icon>folder</mat-icon>
                        <div mat-line>{{dir.value}}</div>
                        <div mat-line>{{getNumChildrenString(dir)}}</div>
                    </mat-list-item>
                </mat-nav-list>
            </div>
        </div>
        <mat-divider></mat-divider>
        <br/>

    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button mat-button [mat-dialog-close]="false"> Cancel </button>
        <button mat-raised-button (click)="closeDialog()" color="primary"> Confirm </button>
    </mat-dialog-actions>
    <br/>
</div>
